<template>
	<div class="main_spac1 maincl">
		<div class="main_white padding10">
			<div class="mainor_form">
				<div class="mainor_te">
					<router-link to="/purchasing/return/add" class="mainor_tea"
						>创建退货单</router-link
					>
				</div>
				<el-form
					:inline="true"
					:model="form"
					class="demo-form-inline"
					ref="userListFrom"
					label-width="70px"
				>
					<el-form-item label="采购方式" prop="mode">
						<el-select
							v-model.trim="form.mode"
							placeholder="采购方式"
							class="wid110"
							@change="changeMode(1)"
						>
							<el-option label="所有" value=""></el-option>
							<el-option
								v-for="(modeList, index) in list.modeList"
								:key="index"
								:label="modeList"
								:value="parseInt(index)"
							></el-option>
						</el-select>
						<el-select
							v-model.trim="form.buyer_id"
							placeholder="采购员"
							class="wid220"
							v-show="form.mode == 1"
						>
							<el-option label="所有" value=""></el-option>
							<el-option
								v-for="(buyer, index) in list.buyer"
								:key="index"
								:label="buyer"
								:value="parseInt(index)"
							></el-option>
						</el-select>
						<el-select
							v-model.trim="form.supplier_id"
							placeholder="供应商"
							class="wid220"
							v-show="form.mode != 1 && form.mode"
						>
							<el-option label="所有" value=""></el-option>
							<template v-if="form.mode == 2">
								<el-option
									v-for="(supplier, index) in list.supplier"
									:key="index"
									:label="supplier"
									:value="parseInt(index)"
								></el-option>
							</template>
							<template v-if="form.mode == 3">
								<el-option
									v-for="(supplier, index) in list.direct_supply"
									:key="index"
									:label="supplier"
									:value="parseInt(index)"
								></el-option>
							</template>
						</el-select>
						<el-select
							v-model.trim="form_mode_all"
							placeholder="所有"
							class="wid220"
							v-show="!form.mode"
						>
							<el-option label="所有" value=""></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="单据状态" prop="status">
						<el-select
							v-model.trim="form.status"
							placeholder="单据状态"
							class="wid220"
						>
							<el-option label="所有" value=""></el-option>
							<el-option
								v-for="(statusList, index) in list.statusList"
								:key="index"
								:label="statusList"
								:value="parseInt(index + 1)"
							></el-option>
						</el-select>
					</el-form-item>
					<div class="more el-form-item" @click="more">
						<span>更多</span>
						<i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
					</div>
					<div class="clearfix"></div>
					<el-collapse-transition>
						<div v-if="moredata">
							<div>
								<el-form-item label="退货单号" prop="order_sn">
									<el-input
										v-model.trim="form.order_sn"
										placeholder="退货单号"
										clearable
										class="wid220"
									></el-input>
								</el-form-item>
								<el-form-item label="采购单号" prop="purchase_order_sn">
									<el-input
										v-model.trim="form.purchase_order_sn"
										placeholder="采购单号"
										clearable
										class="wid220"
									></el-input>
								</el-form-item>
								<el-form-item label="退货方式" prop="type">
									<el-select
										v-model.trim="form.type"
										placeholder="退货方式"
										class="wid220"
									>
										<el-option label="所有" value=""></el-option>
										<el-option
											v-for="(typeList, index) in list.typeList"
											:key="index"
											:label="typeList"
											:value="parseInt(index)"
										></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="创建日期" prop="createTime">
									<el-date-picker
										v-model="createTime"
										type="daterange"
										class="time220"
										:editable="false"
										unlink-panels
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期"
										value-format="yyyy-MM-dd"
										:clearable="false"
										:picker-options="pickerOptions"
									/>
								</el-form-item>
								<el-form-item label="退货时间" prop="establishTime">
									<el-date-picker
										v-model="establishTime"
										type="daterange"
										class="time220"
										:editable="false"
										unlink-panels
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期"
										value-format="yyyy-MM-dd"
										:clearable="false"
										:picker-options="pickerOptions"
									/>
								</el-form-item>
							</div>
						</div>
					</el-collapse-transition>
					<div class="clearfix"></div>
					<el-form-item class="marginTop10">
						<el-button class="reset marginLeft10" type="primary" @click="reset"
							>重置</el-button
						>
						<el-button
							type="primary"
							@click="getArticleList"
							:loading="listLoading"
							>搜索</el-button
						>
					</el-form-item>
				</el-form>
			</div>
			<div class="main_table" style="min-height: 570px">
				<el-table
					ref="multipleTable"
					v-loading="listLoading"
					:data="list.list.data"
					element-loading-text="加载中"
					fit
					border
					highlight-current-row
				>
					<el-table-column
						label="退货单号"
						prop="order_sn"
						:show-overflow-tooltip="true"
					/>

					<el-table-column
						label="采购单号"
						prop="order_sn"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">{{
							scope.row.purchase ? scope.row.purchase.order_sn : ""
						}}</template>
					</el-table-column>

					<el-table-column
						label="采购方式"
						prop="byname"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							<span :class="'modetype' + scope.row.type">
								{{ list.modeList[scope.row.mode] }}</span
							>
						</template>
					</el-table-column>

					<el-table-column
						label="采购员/供应商"
						prop="market"
						:show-overflow-tooltip="true"
						min-width="100"
					>
						<template slot-scope="scope">{{
							scope.row.mode == 1
								? scope.row.buyer.name
								: scope.row.supplier.name
						}}</template>
					</el-table-column>
					<el-table-column
						label="退货金额"
						prop="money"
						:show-overflow-tooltip="true"
					/>
					<el-table-column
						label="单据状态"
						prop="status"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope"
							><span :class="'type' + scope.row.status">
								{{ list.statusList[scope.row.status] }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						label="创建时间"
						prop="created_at"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							{{ parseTime(scope.row.created_at, "{y}-{m}-{d}") }}
						</template>
					</el-table-column>
					<el-table-column
						label="退货时间"
						prop="created_at"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							{{
								scope.row.return_time
									? parseTime(scope.row.return_time, "{y}-{m}-{d}")
									: ""
							}}
						</template>
					</el-table-column>
					<el-table-column
						label="管理操作"
						align="left"
						fixed="right"
						width="240"
						class-name="main_hei"
					>
						<template slot-scope="scope">
							<router-link :to="'/purchasing/return/see/' + scope.row.id">
								<el-link type="success">查看</el-link>
							</router-link>

							<router-link :to="'/purchasing/return/edit/' + scope.row.id">
								<el-link type="warning" v-if="scope.row.status == 0"
									>审核</el-link
								>
							</router-link>

							<el-link
								type="danger"
								@click="delet(scope.$index, scope.row.id)"
								v-if="scope.row.status == 0"
								>取消</el-link
							>
							<el-link
								style="color: rgb(17, 138, 178)"
								@click="exportOrderiInfo(scope.row.id)"
								>导出</el-link
							>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="main_page boxdq">
				<div></div>
				<!-- 分页 -->
				<div class="main_page_r">
					<el-pagination
						:current-page="current.page"
						:page-sizes="[20, 30, 50, 100]"
						:page-size="limit"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalCount"
						background
						@size-change="changeLimit"
						@current-change="changePage"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		purchaseReturn_index,
		purchaseReturn_cancel,
		export_purchasing_return,
	} from "@/api/purchasing/purchasingReturn";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { parseTime, exportMethod } from "@/utils/index";
	import dateOption from "@/options/dateOption";

	export default {
		data() {
			return {
				// 时间
				parseTime,
				exportMethod,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				// 搜索
				form: {
					return_start_time: "",
					return_end_time: "",
					start_time: "",
					end_time: "",
					purchase_order_sn: "",
					type: null,
					order_sn: "",
					mode: null,
					status: null,
					buyer_id: null,
					supplier_id: null,
				},
				createTime: [],
				establishTime: [],
				pickerOptions: dateOption,
				// 更多
				moredata: false,
				// 列表数据
				list: {
					list: {
						data: [],
					},
				},
				listLoading: false,
				// 是否编辑
				isEdit: false,
				form_mode_all: null,
			};
		},
		methods: {
			// 搜索
			getArticleList() {
				this.current.page = 1;
				this.purchaseReturn_index();
			},
			reset() {
				this.$refs["userListFrom"].resetFields();
				this.createTime = [];
				this.establishTime = [];
				this.form.supplier_id = null;
				this.form.buyer_id = null;
				this.getArticleList();
			},
			// 更多
			more() {
				this.moredata = !this.moredata;
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.purchaseReturn_index();
			},
			changePage(page) {
				this.current.page = page;
				this.purchaseReturn_index();
			},
			// 采购方式切换
			changeMode(type) {
				switch (type) {
					case 1:
						this.form_mode_all = null;
						this.form.supplier_id = "";
						this.form.buyer_id = "";
						break;
				}
			},
			// 取消
			delet(index, id) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name, { id: id })) +
								apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: id }
				);
				this.$confirm("是否取消退货单?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						purchaseReturn_cancel(data).then((res) => {
							if (res.errcode == 0) {
								this.$message({
									message: "取消成功",
									type: "success",
								});
								this.purchaseReturn_index();
							} else {
								this.$message.error(res.errmsg);
							}
						});
					})
					.catch(() => {});
			},
			// 列表
			purchaseReturn_index() {
				this.listLoading = true;
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(
								Object.assign(apiUrl().name, this.list_form(), this.current)
							) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.list_form(),
					this.current
				);
				purchaseReturn_index(data).then((res) => {
					this.listLoading = false;
					if (res.errcode == 0) {
						this.list = res.data;
						this.totalCount = res.data.list.total;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			list_form() {
				let form = JSON.parse(JSON.stringify(this.form));
				form.start_time = this.createTime[0] ? this.createTime[0] : "";
				form.end_time = this.createTime[1] ? this.createTime[1] : "";
				form.return_start_time = this.establishTime[0]
					? this.establishTime[0]
					: "";
				form.return_end_time = this.establishTime[1] ? this.establishTime[1] : "";

				return form;
			},

			// 导出
			exportOrderiInfo(id) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: id }
				);
				export_purchasing_return(data)
					.then((res) => {
						this.exportMethod(res, "采购退货单");
					})
					.catch(() => {
						this.$message.error("导出失败");
					});
			},
		},
		created() {
			// 列表
			this.purchaseReturn_index();
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.mainor_form form {
	width: calc(100% - 140px);
}

// 单据状态
.type1 {
	color: $green;
}
.type2 {
	color: $colour_red;
}
.type0 {
	color: $colour_orange;
}
// 订单状态
.order1 {
	color: $order_color1;
}
.order2 {
	color: $order_color2;
}
.order3 {
	color: $order_color3;
}
.order4 {
	color: $order_color4;
}

.modetype2 {
	color: #03a98e;
}
.modetype1 {
	color: #118ab2;
}
.modetype3 {
	color: #aacd6e;
}
</style>
